<template>
  <view>
    <swiper
      class="carousel-swiper"
      :circular="true"
      :autoplay="true" 
      :interval="2000"
      :duration="300"
      @change="handleChange"
      :vertical="false"
    >
      <swiper-item v-for="(image, index) in carouselImages" :key="index">
        <image 
          :src="image.src"
          mode="aspectFill"
          class="carousel-image"
        />
      </swiper-item>
    </swiper>
    
    <!-- 指示点 -->
    <view class="indicator">
      <view 
        v-for="(_, index) in carouselImages" 
        :key="index"
        :class="['dot', { active: current === index }]"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      carouselImages: [
        { 
          src: "https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b" 
        },
        { 
          src: "https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b" 
        },
        { 
          src: "https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b" 
        }
      ]
    }
  },
  methods: {
    handleChange(e) {
      this.current = e.detail.current
    }
  }
}
</script>

<style lang="scss">
.carousel-swiper {
  width: 100%;
  height: 400rpx;
  
  .carousel-image {
    width: 100%;
    height: 100%;
  }
}

.indicator {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12rpx;
  
  .dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    
    &.active {
      width: 24rpx;
      border-radius: 6rpx;
      background: #fff;
    }
  }
}
</style>
